<template>
	<view class="bigbox">
		<view class="head">
			<view>贷款计算器</view>
			<view class="xl">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{ array[index] }}</view>
				</picker>
				<image src="../../static/81.png" mode=""></image>
			</view>
		</view>
		<view class="box">
			<view>
				<view>客户到手金额</view>
				<input v-model="a4" type="number" placeholder-class="fot1" value="" placeholder="请输入" />
			</view>
			<view>
				<view>银行合同金额</view>
				<input v-model="a1" type="number" placeholder-class="fot1" value="" disabled="disabled" placeholder="待计算" />
			</view>
			<view>
				<view>月供</view>
				<input v-model="a2" type="number" placeholder-class="fot1" value="" disabled="disabled" placeholder="待计算" />
			</view>
			<view>
				<view>扩容金额</view>
				<input v-model="a3" type="number" placeholder-class="fot1" value="" disabled="disabled" placeholder="待计算" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			array: ['4.98厘', '5.98厘', '6.58厘', '6.98厘'],
			index: 0,
			a1: '',
			a2: '',
			a3: '',
			a4: '',
		};
	},
	mounted() {
		// this.roundup(100,2)
	},
	watch:{
		a4:function(){
			this.qh()
		},
		index:function(){
			this.a1 = ''
			this.a2 = ''
			this.a3 = ''
			this.a4 = ''
			// this.qh()
		}
	},
	// @input="onInput"
	methods: {
		qh:function(){
			if (this.array[this.index] == '4.98厘') {
				console.log(111111)
				let j1 = this.a4 * 0.0022 * 36 + this.a4 * 1;
				this.a1 = Math.ceil(j1 / 100) * 100;
				this.a2 = this.a1 / 36 + this.a1*0.0027803;
				this.a2 = this.a2.toFixed(2)
				this.a3 = this.a1 - this.a4
			}else if (this.array[this.index] == '5.98厘') {
				console.log(22222)
				let j1 = this.a4 * 0.0032 * 36 + this.a4 * 1;
				this.a1 = Math.ceil(j1 / 100) * 100;
				this.a2 = this.a1 / 36 + this.a1*0.0027803;
				this.a2 = this.a2.toFixed(2)
				this.a3 = this.a1 - this.a4
			}else if (this.array[this.index] == '6.58厘') {
				console.log(33333)
				let j1 = this.a4 * 0.0038 * 36 + this.a4 * 1;
				this.a1 = Math.ceil(j1 / 100) * 100;
				this.a2 = this.a1 / 36 + this.a1*0.0027803;
				this.a2 = this.a2.toFixed(2)
				this.a3 = this.a1 - this.a4
			}else if (this.array[this.index] == '6.98厘') {
				console.log(44444)
				let j1 = this.a4 * 0.00427 * 36 + this.a4 * 1;
				this.a1 = Math.ceil(j1 / 100) * 100;
				this.a2 = this.a1 / 36 + this.a1*0.0027803;
				this.a2 = this.a2.toFixed(2)
				this.a3 = this.a1 - this.a4
			}
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		}
	}
};
</script>

<style>
	.fot1 {
		font-size: 16rpx;
	}
	.xl > image {
		width: 20rpx;
		height: 16rpx;
		margin-left: 20rpx;
	}
	.xl {
		width: 150rpx;
		height: 50rpx;
		border-radius: 15rpx;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box > view > input {
		width: 200rpx;
		text-align: right;
	}
	.box > view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border: 1px solid red; */
		margin-bottom: 20rpx;
	}
	.box {
		height: 303rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.head {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.bigbox {
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
